// Light theme for CodeMirror

// Editor styling
// Three editor instances can be styled: The main editor, the quicklook editor
// and the custom CSS editor
#editor .CodeMirror, .quicklook .body .CodeMirror, .dialog .CodeMirror {
    color:rgb(46, 56, 60);

    &.cm-stex-mode, &.cm-css-mode {
      font-family: @font-code;
        .cm-comment    { color: @grey-2; }
        .cm-attribute  { color: @blue-0; }
        .cm-builtin    { color: @blue-0; } // Some modes use this for keywords
        .cm-string     { color: @green-0; }
        .cm-string-2   { color: @gold-selection-dark; }
        .cm-variable   { color: @grey-6; }
        .cm-variable-2 { color: @green-selection-dark; }
        .cm-keyword    { color: @purple-selection; }
        .cm-property   { color: @orange-2; }
        .cm-type       { color: @orange-2; }
        .cm-atom       { color: @green-0; }
        .cm-number     { color: @blue-0; }
    }
}

.CodeMirror-selected { background-color:@selection-light !important; }
.CodeMirror-cursor { background: @c-primary; }

// Now general styling for variables

// First generic variables
.cm-comment, .cm-fenced-code { color:@grey-3; }
.cm-comment:not(.cm-formatting):not(.cm-fenced-code) {
  background-color: @grey-0;
  border-radius: @border-radius;
}

.cm-fenced-code, .cm-stex-mode {
  font-family: @font-code;
    &.cm-comment    { color: @grey-2; }
    &.cm-attribute  { color: @blue-0; }
    &.cm-builtin    { color: @blue-0; } // Some modes use this for keywords
    &.cm-string     { color: @green-0; }
    &.cm-string-2   { color: @gold-selection-dark; }
    &.cm-variable   { color: @grey-6; }
    &.cm-variable-2 { color: @green-selection-dark; }
    &.cm-keyword    { color: @purple-selection-dark; }
    &.cm-property   { color: @orange-2; }
    &.cm-type       { color: @orange-2; }
    &.cm-atom       { color: @green-0; }
    &.cm-number     { color: @blue-0; }
}

// HTML tags
.cm-tag       { font-family: @font-code; font-size: @font-mono-size; color: @orange-2; }
.cm-attribute { font-family: @font-code; font-size: @font-mono-size; color: @blue-0; }
.cm-string    { font-family: @font-code; font-size: @font-mono-size; color: @green-0; }
.cm-bracket   { font-family: @font-code; font-size: @font-mono-size; color: @grey-5; }

// TYPOGRAPHY
.cm-formatting-header-1, .cm-formatting-header-2, .cm-formatting-header-3,
.cm-formatting-header-4, .cm-formatting-header-5, .cm-formatting-header-6,
.cm-url { color: @c-primary; }

.size-header-1, .size-header-2, .size-header-3,
.size-header-4, .size-header-5, .size-header-6 { font-weight: bold; }

/* LISTS */
.cm-formatting-list-ul,
.cm-formatting-list-ol { color: @c-primary; }

/* TYPOGRAPHY */
.cm-quote, .cm-link, .cm-strong, .cm-em { color:@c-secondary; }
.cm-spell-error { border-bottom:2px dotted @orange-2; }
.cm-zkn-tag, .cm-zkn-id, .cm-zkn-link { color:@c-primary; }
// cma = code-mirror-anchor
.cma { color: @c-secondary; font-weight: inherit; }

// citations
.citeproc-citation {
  background-color: @grey-0;
  &.error { color: @fg-error; }
}

.cm-escape-char { color:@grey-3; }

// Horizontal ruler
.cm-hr {
  color: @c-primary;
  font-family: @font-code;
  font-weight: bold;
}

.CodeMirror-foldmarker {
  background-color: @grey-0;
  color: @grey-3;

  &:hover { background-color: @grey-1; }
}

.CodeMirror-guttermarker-subtle { color: #dadada; }

// Heading tags
.heading-tag {
  color: @grey-1;
  transition: 0.2s all ease;
  &:hover {
    color: @grey-3;
    background-color: @grey-1;
  }
}

// Hint related stuff
.CodeMirror-hints {
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border-radius: @border-radius;
  border: 1px solid @grey-1;

  background: white;
  font-size: 90%;
  li.CodeMirror-hint {
    color: @grey-7;

    &:hover { background-color: @grey-0; }
  }

  li.CodeMirror-hint-active {
    background: @c-primary;
    color: @grey-0;

    &:hover { background-color: @c-primary-shade; }
  }

  // Special tags
  .cm-hint-colour {
    color: @grey-3;
    background-color: @grey-2;
  }
}
